<template>
    <el-tooltip :content="value" :disabled="tooltipShow" placement="top-start" popper-class ="my-tooltip" offset="3">
      <div ref="content" @mouseover="isShowTooltip" class="ellipsis" :style="{ maxWidth: maxWidth }">{{value}}</div>
    </el-tooltip>
  </template>
  
  <script>
  export default {
    name: 'DescriptionsTooltip',
    props: ["value", "maxWidth"],
    data () {
      return {
        tooltipShow: false
      }
    },
    methods: {
      isShowTooltip () {
        console.log(this.$refs.content.offsetWidth)
        console.log(this.$refs.content.parentNode.parentNode.offsetWidth)
        console.log(this.$refs.content.parentNode.offsetWidth)

        const contentWidth = this.$refs.content.offsetWidth;
    const parentWidth = this.$refs.content.parentNode.offsetWidth;
   
    // 获取父级容器的padding值
    const parentPadding = parseFloat(getComputedStyle(this.$refs.content.parentNode).padding);

    // 计算内容实际宽度
    const actualContentWidth = contentWidth + parentPadding * 2;

    // 计算内容和父级容器的比例
    const widthRatio = actualContentWidth / parentWidth;

    // 假设最大允许的宽度占父级容器的比例为0.8
    // const maxContentWidthPercentage = 0.95;

    // 计算内容的最大宽度
    const contentMaxWidth = parentWidth -50;

    console.log(parentWidth)
    console.log(actualContentWidth)
    // 判断是否需要显示tooltip
    const shouldShowTooltip = actualContentWidth < contentMaxWidth;
        // const bool = this.$refs.content.offsetWidth < this.$refs.content.parentNode.offsetWidth*0.96
        const bool=shouldShowTooltip
        console.log(bool)
        this.tooltipShow = bool
      }
    }
  }
  </script>
  
  <style >
  .my-tooltip{
    max-width: 40% !important;
    margin: auto;
    padding: auto;
  }
  .ellipsis {
    display: inline-block ;
    height: 40px;
    /* max-width: 78vh !important; */
    overflow: hidden ;
    white-space: nowrap ;
    text-overflow: ellipsis ;
    }
  </style>
  
